<template>
  <div class="material-container">
    <!-- 左侧部分 -->
    <div class="left-side">

      <!-- 单段材料 -->
      <template v-if="examStore.currQuestion?.type == 6">
        <div class="material-content" v-html="examStore.currQuestion?.title"></div>
      </template>

      <!-- 多段材料 -->
      <template v-if="examStore.currQuestion?.type == 7">
        <!-- 材料标签 -->
        <div class="material-tabs">
          <div
            v-for="(material, index) in materials"
            :key="index"
            class="tab"
            :class="{ active: currentIndex === index }"
            @click="handleTabClick(index)"
          >
            材料{{ index + 1 }}
          </div>
        </div>

        <!-- 材料内容 -->
        <div class="material-content">
          {{ materials[currentIndex]?.content }}
        </div>
      </template>

      <!-- 表格部分 -->
      <div class="table-container">
        <el-select v-model="selectedYear" class="year-select">
          <el-option v-for="year in years" :key="year" :label="year" :value="year" />
        </el-select>
        <table>
          <tr>
            <th v-for="(header, index) in materials[currentIndex]?.headers" :key="index">
              {{ header }}
            </th>
          </tr>
          <tr
            v-for="(row, rowIndex) in materials[currentIndex]?.tableData"
            :key="rowIndex"
          >
            <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
          </tr>
        </table>
      </div>
    </div>
    <!-- 右侧部分 -->
    <div class="right-side">
      <RightAndWrong :questions="quesitonData" :isReview="isReview" />
    </div>
  </div>
</template>

<script setup>
// 03 DI-多源推理题（综合题型）    MSR题
/**
 * 下拉选择excel的表头
 * 从小到大
 * TPA选项是竖着的选项
 */
import RightAndWrong from "./rightAndWrong.vue";
import { useExam } from "@/stores/exam.js";
const examStore = useExam();

// const props = defineProps({
//   materials: {
//     type: Array,
//     required: true,
//     default: () => []
//   }
// })

const isReview = ref(true);
// 当前选中的材料索引
const currentIndex = ref(0);

const selectedYear = ref("2025");
const years = ["2025"];

// 切换材料的方法
const handleTabClick = (index) => {
  currentIndex.value = index;
};
// 文章部分
const materials = [
  {
    content:
      "题干：题干：直接细节题：正确答案为(E)。根据题干关键词whig propaganda在第二段定位。原文通过gathered， reminded， and conferred的平行并列结构说明了出席whig党集会的女性可以为whig带来什么，而(E)项正是conferred部分的同义改写。题干：直接细节题：正确答案为(E)。根据题干关键词whig propaganda在第二段定位。原文通过gathered， reminded， and conferred的平行并列结构",
    headers: ["表头", "表头", "表头", "表头", "表头", "表头"],
    tableData: [Array(6).fill("2025"), Array(6).fill("2025"), Array(6).fill("2025")],
  },
];
const quesitonData = {
  content:
    "题干：直接细节题：正确答案为(E)。根据题干关键词whig propaganda在第二段定位。原文通过gathered， reminded， and conferred的平行并列结构说明了出席whig党集会的女性可以为whig带来什么，而(E)项正是conferred部分的同义改写。题干：直接细节题：正确答案为(E)。根据题干关键词whig propaganda在第二段定位。原文通过gathered， reminded， and conferred的平行并列结构",
  list: [
    {
      text: "原文没有提到女性应该有更多政治权利。",
      correct: true,
      selected: undefined,
    },
    {
      text: "原文没有提到女性应该有更多政治权利。",
      correct: true,
      selected: undefined,
    },
    {
      text: "原文没有提到女性应该有更多政治权利。",
      correct: true,
      selected: undefined,
    },
    {
      text: "原文没有提到女性应该有更多政治权利。",
      correct: true,
      selected: undefined,
    },
    {
      text: "原文有提到女性应该有更多政治权利。",
      correct: false,
      selected: undefined,
    },
  ],
};
</script>

<style scoped lang="scss">
.year-select {
  width: 160px;
  margin: 10px 0px;
}
.material-container {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.left-side {
  flex: 1;
  padding-right: 20px;
  border-right: 1px solid #ccc;
}

.right-side {
  flex: 1;
}

.material-tabs {
  display: flex;
  gap: 10px;
  // padding-bottom: 15px;
  // margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.tab {
  padding: 8px 16px;
  background-color: #f0f0f0;
  cursor: pointer;
  border-radius: 10px 10px 0 0;
}

.tab.active {
  background-color: #3c7a89;
  color: white;
}

.material-content {
  margin-bottom: 20px;
  padding: 15px;
}

.table-container {
  width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

select {
  margin-bottom: 15px;
}
</style>
